import React, {Component} from 'react';
import Son from './Son';


class Father extends Component {

    constructor(props) {
        super(props);
        this.state = {
            money: 1000,
            // 存储子组件传递的数据
            message: '',
            number: '',
        }

    }

    /*
    * 子父通信的第一步
    * data 是稍后子组件传递的数据
    * */
    callback = (data) => {
        /*子父通信的第四步： 组件的回调函数执行，得到子组件传递的数据信息*/
        /*父组件可以显示子组件传递的数据*/
        console.log(data, '子组件传递的数据');


        this.setState({
            message: data.message,
            number: data.number,
        })
    }

    callback1 = (data) => {
        /*子父通信的第四步： 组件的回调函数执行，得到子组件传递的数据信息*/
        /*父组件可以显示子组件传递的数据*/
        console.log(data, '子组件传递的数据');


        this.setState({
            message: data.message,
            number: data.number,
        })
    }


    render() {
        return (
            <div>
                <h1>父组件里面使用son子组件-嵌套关系-属性传递</h1>
                <h2>子组件传递的数据：{this.state.message}: {this.state.number}</h2>
                <hr/>
                {/* 子父通信的第二步： 通过属性将该回调函数传递给子组件 */}
                <Son cb1={this.callback1} cb={this.callback} money={this.state.money}></Son>
            </div>
        );
    }
}

export default Father;
